<template>
	<view class="">
		<uni-nav-bar left-icon="back" @clickLeft="back" left-text="返回" title="城市地铁">
			<template v-slot:right>
				<view style="display: flex;align-items: center;" @click="right">
					<image src="/static/zonglan.png" style="height: 24px;width: 24px;" mode=""></image>
				</view>
			</template>
		</uni-nav-bar>
		<view class="container">
			<uni-search-bar @confirm="search" @cancel="cancel" placeholder="请输入地铁站名称" bgColor="white" />
			<uni-card :title="' '" style="margin-top: 10px;" v-if="list.length>0">
				<template v-slot:title>
					<view style="display: flex;align-items: center;">
						<image src="/static/subway.png" style="height: 45px;width: 45px;" mode=""></image>
						<view class="" style="font-size: 18px;margin-left: 10px;">{{currentName}}</view>
					</view>
				</template>
				<view v-for="(item,index) in list" :key="index" @click="to(item.lineId)">
					<view class="item">路线名称：{{item.lineName}}</view>
					<view class="item">下一站名称：{{item.nextStep.name}}</view>
					<view class="item">到达本站时长：{{item.reachTime}}分</view>
					<view class="line"></view>
				</view>
			</uni-card>
			<noData v-else></noData>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				currentName: "建国门"
			};
		},
		onLoad(item) {

		},
		onReady() {
			this.getList()
		},
		onShow() {

		},
		methods: {
			right(){
				uni.navigateTo({
					url: 'zonglan/zonglan',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			back() {
				uni.switchTab({
					url: "../service"
				})
			},
			to(id) {
				uni.navigateTo({
					url: 'detail/detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getList() {
				this.get('/prod-api/api/metro/list', {
					currentName: this.currentName
				}, 1).then(res => {
					let data = res.data
					console.log(data);
					this.list = data
				})
			},
			cancel(e) {
				this.currentName = "建国门"
				this.getList()
			},
			search(e) {
				this.currentName = e.value
				this.getList()
			}
		}
	};
</script>

<style lang="scss">

</style>
